<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- jQuery的支持 -->
		<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>
		<style>
			.block-content {
				display: flex;
				flex-wrap: wrap;
			}

			.goods-list {
				width: 25%;
				display: flex;
				justify-content: center;
				margin-bottom: 20px;
			}

			.goods-block {
				width: 260px;
				padding: 0 30px;
			}

			.goods-img {
				width: 200px;
				height: 200px;
			}

			.foot {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.add-card {
				width: 30px;
				height: 30px;
			}

			.mt20 {
				margin-top: 20px;
			}
		</style>
	</head>
	<body>

		<div class="block-content">
			<div class="goods-list">
				<div class="goods-block">
					<img src="http://bigdata2cv2.oss-cn-beijing.aliyuncs.com/C%3A%5Cfakepath%5C%E5%9B%BE%E7%89%871.jpg"
						alt="" class="goods-img">
					<div class="foot mt20">
						<div class="goods-name">名称</div>
						<img src="./img/cart.png"
							alt="" class="add-card">
					</div>
					<div class="foot mt20">
						<div class="new-price">30.60元</div>
						<div class="old-price">50.00元</div>
					</div>
				</div>
			</div>

			<div class="goods-list">
				<div class="goods-block">
					<img src="http://bigdata2cv2.oss-cn-beijing.aliyuncs.com/C%3A%5Cfakepath%5C%E5%9B%BE%E7%89%871.jpg"
						alt="" class="goods-img">
					<div class="foot mt20">
						<div class="goods-name">名称</div>
						<img src="./img/cart.png"
							alt="" class="add-card">
					</div>
					<div class="foot mt20">
						<div class="new-price">30.60元</div>
						<div class="old-price">￥50.00元</div>
					</div>
				</div>
			</div>

			<div class="goods-list">
				<div class="goods-block">
					<img src="http://bigdata2cv2.oss-cn-beijing.aliyuncs.com/C%3A%5Cfakepath%5C%E5%9B%BE%E7%89%871.jpg"
						alt="" class="goods-img">
					<div class="foot mt20">
						<div class="goods-name">名称</div>
						<img src="./img/cart.png"
							alt="" class="add-card">
					</div>
					<div class="foot mt20">
						<div class="new-price">30.60元</div>
						<div class="old-price">50.00元</div>
					</div>
				</div>
			</div>

			<div class="goods-list">
				<div class="goods-block">
					<img src="http://bigdata2cv2.oss-cn-beijing.aliyuncs.com/C%3A%5Cfakepath%5C%E5%9B%BE%E7%89%871.jpg"
						alt="" class="goods-img">
					<div class="foot mt20">
						<div class="goods-name">名称</div>
						<img src="./img/cart.png"
							alt="" class="add-card">
					</div>
					<div class="foot mt20">
						<div class="new-price">30.60元</div>
						<div class="old-price">50.00元</div>
					</div>
				</div>
			</div>

			<div class="goods-list">
				<div class="goods-block">
					<img src="http://bigdata2cv2.oss-cn-beijing.aliyuncs.com/C%3A%5Cfakepath%5C%E5%9B%BE%E7%89%871.jpg"
						alt="" class="goods-img">
					<div class="foot mt20">
						<div class="goods-name">名称</div>
						<img src="./img/cart.png"
							alt="111" class="add-card">
					</div>
					<div class="foot mt20">
						<div class="new-price">30.60元</div>
						<div class="old-price">50.00元</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>